import React, {Component} from "react";
import {
    CoverBox,
    HomeBaseWrapper,
    HomeContainer,
    HomeLeftContainer,
    HomeRightContainer,
    HomeWrapperBackground,
    SearchBox,
    SearchBoxWrapper
} from "./style";
import NewsList from './NewsList'
import BoardList from "./BoardList";
import RecommendList from "./RecommendList";
import {connect} from "react-redux";
import {actions} from '@/store/home/Article';
import {getIndexHomePage} from "@/api/artArticleInfo";
import CardList from "@/component/Home/CardList";
import {CSSTransition} from "react-transition-group";
import Config from "@/config";
import {getPath} from "@/util/routerUtil";
import EventBus from "@/util/EventBus";
import {getCategoryList} from "@/api/artPageCategory";

class Home extends Component {
    constructor(props) {
        super(props);
        this.handleGetIndexHomePage = this.handleGetIndexHomePage.bind(this);
        this.handleGetArtPageCategory = this.handleGetArtPageCategory.bind(this);
        this.handleClickSearchBtn = this.handleClickSearchBtn.bind(this);
        this.handleInputSearchInfo = this.handleInputSearchInfo.bind(this);
        this.handleSearchFocusEvent = this.handleSearchFocusEvent.bind(this);
        this.state = {
            ArticleList: [],
            ArtPageCategory:[],
            searchValue: '',
            searchFocused: false,
            selectCategory:null,
        }
    }

    handleInputSearchInfo(e) {
        this.setState({searchValue:e.target.value})
    }

    handleSearchFocusEvent(bool) {

    }
    handleClickSearchBtn(e) {
        e.preventDefault();
        if (getPath() === '/search') {
            EventBus.emit('searchGames', this.state.searchValue)
        } else {
            this.props.history.push({pathname: '/search', query: {kw: this.state.searchValue}});
        }
        // 清空搜索框内容
        // this.props.handleClearInputSearch();
    }
    componentDidMount() {
        this.handleGetIndexHomePage();
        this.handleGetArtPageCategory();
    }

    handleGetIndexHomePage(params){
        if ( params ){
            this.setState({
                selectCategory:params.pageCategory || null
            })
        }
        getIndexHomePage(params).then(res => {
            this.setState({
                ArticleList: res.data
            })
        })
    }

    handleGetArtPageCategory (params){
        getCategoryList(params).then(res => {
            if (res.success){
                this.setState({
                    ArtPageCategory:res.data.rows
                })
            }
        })
    }

    render() {
        return (<>
                {/*<BackGroundVideo id={'home-video'} autoPlay muted loop>*/}
                {/*    <source src={"https://just-game.oss-cn-beijing.aliyuncs.com/sucai/background-video.mp4"}/>*/}
                {/*</BackGroundVideo>*/}
                <CoverBox>
                    <SearchBoxWrapper>
                        <CSSTransition
                            timeout={1000 * 0.3}
                            in={!!this.state.searchFocused}
                            classNames="slide"
                        >
                            <SearchBox
                                onChange={this.handleInputSearchInfo}
                                value={this.state.searchValue}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') {
                                        this.handleClickSearchBtn(e)
                                    }
                                }}
                                onFocus={() => {
                                    this.handleSearchFocusEvent(true);
                                    // addEventListen();
                                }}
                                onBlur={() => {
                                    this.handleSearchFocusEvent(false)
                                }}
                                className={this.state.searchFocused ? 'search-focus' : ''}/>
                        </CSSTransition>
                        <Config.IconFont className={'zoom'} type={'icon-sousuo'} onClick={this.handleClickSearchBtn}/>
                        {/*<i className={this.state.searchFocused ? 'search-focus iconfont zoom' : 'iconfont zoom'}*/}
                        {/*   onClick={() => this.handleClickSearchBtn()}>&#xe605;</i>*/}
                    </SearchBoxWrapper>
                </CoverBox>
                <HomeContainer>
                    <HomeWrapperBackground>
                        <HomeBaseWrapper>
                            {/** 左容器 **/}
                            <HomeLeftContainer>
                                <NewsList ArticleList={this.state.ArticleList || []}
                                          ArtPageCategory={ this.state.ArtPageCategory || [] }
                                          handleSelectCategory={this.handleGetIndexHomePage}
                                          selectCategory={this.state.selectCategory}
                                />
                                <CardList/>
                            </HomeLeftContainer>
                            {/** 右容器 **/}
                            <HomeRightContainer>
                                <BoardList className='board-list'/>
                                <RecommendList/>
                            </HomeRightContainer>
                        </HomeBaseWrapper>
                    </HomeWrapperBackground>
                </HomeContainer>
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        ArticleList: state.getIn(['HomeArticle', 'ArticleList']),
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getHomeArticle() {
            dispatch(actions.SagaQuery());
        }
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
